<template>
	<div>
		<!-- <div v-if="">
		<h3>购物袋</h3>
		<img src="" alt="">
		<p>购物袋是空的哦~</p>
		</div> -->
		
		<div>
			
			<van-nav-bar title="购物袋" left-arrow @click-left="onClickLeft" :fixed=true>
				<van-icon  slot="right" @click="set" >编辑</van-icon>
				<van-icon name="share" slot="right" class="cart-share" @click="tap"/>
			</van-nav-bar>
			
			<van-checkbox-group v-model="result" ref="checkboxGroup">
				<van-checkbox 
				:name="v.pid" 
				shape="square" 
				class="checkStatue"
				v-for="(v,i) in prolist"
				>
					<van-card 
					num="1"
					:price="v.pprice" 
					:desc="v.pdesc" 
					:title="v.pname" 
					:thumb="v.pimg"
					class="cart-list">
						<div slot="tags" class="cart-tag">
							<van-tag>拼色</van-tag>
						</div>
					</van-card>
				</van-checkbox>
			</van-checkbox-group>
			
			<van-submit-bar :price="totalprice" button-text="提交订单" @submit="onSubmit" >
				<van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
				<van-button @click="add" type="info">小计</van-button>
				<span slot="tip">
					你的收货地址不支持同城送, <span>修改地址</span>
				</span>
				
			</van-submit-bar>
		</div>

	</div>
</template>

<script>
	import {mapGetters,mapState,mapMutations} from "vuex"
	export default {
		name: "Cart",
		data() {
			return {
				checked: "",
				result:[],
				ochecked:[],
				totalprice:0
			}
		},
		computed:{
			...mapState(["prolist"]),
		},
		mounted(){
			this.$store.dispatch('getPro')
		},
		methods: {
			onSubmit() {
				
				this.$router.go(0)
				
			},
			checkAll() {
				this.$refs.checkboxGroup.toggleAll();
			},
			onClickLeft() {
				this.$router.go(-1)
			},
			set() {
				this.$router.push("/goodsEdit")
			},
			tap(){
				this.$router.push("/share")
			},
			add(){
				this.$store.state.prolist.forEach(v=>{
					// console.log(this.result)
					let record=this.result.indexOf(v.pid);
					// console.log(record)
					if(record!==-1){
						this.ochecked.push(v)                      
					}
				})
				// console.log(this.ochecked)
				this.ochecked.forEach(v=>{
					this.totalprice+=Number(v.pprice*100)
				})
			}

		}
	}
</script>

<style scoped="">
	.cart-share {
		margin-left: 10px;
	}

	.cart-list {
		width: 300px;
		margin-left: 15px;
		margin-bottom: 15px;
		text-align: left;
	}

	
	.checkStatue {
		margin-left: 10px;
	}
	.cart-tag{
		margin-bottom: 15px;
	}
</style>
